<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
${aier_doctype}
<html <s:property value="aier_html_xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link href="${aier_css_url}jq/jq.css" rel="Stylesheet" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}text.css" />
<link rel="stylesheet"
	href="${aier_css_url}${aier_jqui_css}enhanced.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}school/sm.css" />

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/hh/ui.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/hh/dialog.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jt/td.js"></script>

<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/arrayList.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
<script type="text/javascript"
	src="${aier_js_url}${aier_jqui_js}custominput.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/afu.js"></script>
<script type="text/javascript"
	src="${aier_js_url}${aier_jqui_js}text.js"></script>
<script type="text/javascript" language="javascript">
var num = "${num}";

</script>
</head>

<body>

				<div id="tabs">
					<ul>
						<li><a href="#tabs-1">添加菜谱</a></li>
					</ul>
					<div id="tabs-1" style="height: 100%;">
						<table title="添加" width="100%"
							style="border:solid #3f7506; border-width:1px 0px 0px 1px;">
							<tr width="100%" align="center">
								<td colspan="4"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									<table width="100%"
										style="border:solid #3f7506; border-width:1px 0px 0px 1px;">
										<tr align="center">
											<td width="20%"
												style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
												菜名：<input id="cp_name"></td>
											<td width="20%"
												style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
												时间：  <input id="cp_time" size="15" value="5"><br>
												准备时间：<input id="cp_ptime" size="15" value="5"><br>
												人数：  <input id="cp_number" size="15" value="1"></td>
											<td width="30%"
												style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
												描述：<textarea id="cp_desc" rows='10' cols='40'></textarea></td>
											<td width="30%"
												style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
												图片：<input id='file0_0' type='file' name='file0_0' />
												<button onclick="upfile(0,0);"
													class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
													role="button" aria-disabled="false">
													<span class="ui-button-text">上传</span>
												</button> <br> <input type='hidden' id='img_buzou_0_0' /> <img
												id='buzou_0_0' width='200' height='150'></td>
										</tr>
									</table></td>
							</tr>
							<tr align="center">
								<td width="25%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									工艺： <select id="gy_types">
										<c:forEach var="gy" items="${gongyiList }">
											<option value="${gy.gy_id}">${gy.gy_name}</option>
										</c:forEach>
								</select></td>
								<td width="25%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									口味： <select id="kw_types">
										<c:forEach var="kw" items="${kouweiList }">
											<option value="${kw.kw_id}">${kw.kw_name}</option>
										</c:forEach>
								</select> <!-- <input id="kw_name" /> --></td>
								<td width="25%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									难度： <select id="nd_types">
										<c:forEach var="nd" items="${nanduList }">
											<option value="${nd.nd_id}">${nd.nd_name}</option>
										</c:forEach>
								</select> <!-- <input id="nd_name" /> --></td>
								<td width="25%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									板块： <select id="cx_types">
										<c:forEach var="cx" items="${caixiList }">
											<option value="${cx.cx_id}">${cx.cx_name}</option>
										</c:forEach>
								</select> <!-- <input id="nd_name" /> --></td>
							</tr>
							<tr align="center" heigth="300">
								<td colspan="2" width="50%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									主料
									<div style="width:99%; height:200px; overflow:scroll;">
										<table id="zhuliao" width="99%"
											style="border:solid #3f7506; border-width:1px 1px 1px 1px;">
											<tr width="99%" align="center" id="trHeader_zl">
												<td width="5%">序号</td>
												<td width="35%">主料名</td>
												<td width="25%">份量</td>
												<td width="30%">
													<button onclick="AddSignRow('zhuliao');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
													role="button" aria-disabled="false">
														<span class="ui-button-text">添加主料</span>
													</button>
													<button onclick="DeleteSignRow('zhuliao');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
														role="button" aria-disabled="false">
														<span class="ui-button-text">删除主料</span>
													</button>
												</td>
											</tr>
										</table>
										<input type='hidden' id='txtTRLastIndex_zhuliao' value="1" />
									</div></td>
								<td colspan="2" width="50%"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									辅料
									<div style="width:99%; height:200px; overflow:scroll;">
										<table id="fuliao" width="99%"
											style="border:solid #3f7506; border-width:1px 1px 1px 1px;">
											<tr width="99%" align="center" id="trHeader_zl">
												<td width="5%">序号</td>
												<td width="35%">辅料名</td>
												<td width="25%">份量</td>
												<td width="30%">
													<button onclick="AddSignRow('fuliao');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
														role="button" aria-disabled="false">
														<span class="ui-button-text">添加辅料</span>
													</button>
													<button onclick="DeleteSignRow('fuliao');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
													role="button" aria-disabled="false">
														<span class="ui-button-text">删除辅料</span>
													</button>													
												</td>
											</tr>
										</table>
										<input type='hidden' id='txtTRLastIndex_fuliao' value="1" />
									</div></td>
							</tr>
							<tr align="center">
								<td colspan="4"
									style="border:solid #3f7506; border-width:0px 1px 1px 0px; padding:10px 0px;">
									做法
									<div style="width:100%; ">
										<table id="buzou" width="99%"
											style="border:solid #3f7506; border-width:1px 1px 1px 1px;">
											<tr width="99%" align="center" id="trHeader_zl">
												<td width="10%">序号</td>
												<td width="35%">步骤内容</td>
												<td width="35%">步骤图片</td>
												<td width="20%">
													<button onclick="AddbuzouRow('buzou');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
														role="button" aria-disabled="false">
														<span class="ui-button-text">添加步骤</span>
													</button>
													<button onclick="DeleteSignRow('buzou');"
														class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
														role="button" aria-disabled="false">
														<span class="ui-button-text">删除步骤</span>
													</button>
												</td>
											</tr>
										</table>
										<input type='hidden' id='txtTRLastIndex_buzou' value="1" />
									</div></td>
							</tr>
							<tr align="right">
								<td colspan="4">
									<button onclick="addCaiPu();"
										class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
										role="button" aria-disabled="false">
										<span class="ui-button-text">添加菜谱</span>
									</button>
									<button onclick="history.go(-1);"
										class="b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
										role="button" aria-disabled="false">
										<span class="ui-button-text">返回</span>
									</button>
									
							</tr>
						</table>
					</div>
				</div>

</body>

<script type="text/javascript">
$("#tabs").tabs();

function addCaiPu(){
	var gy_id = $('#gy_types  option:selected').val();
	var kw_id = $('#kw_types  option:selected').val();
	var nd_id = $('#nd_types  option:selected').val();
	var cx_id = $('#cx_types  option:selected').val();
	var cp_name = $('#cp_name').val();
	var cp_time = $('#cp_time').val();
	var cp_ptime = $('#cp_ptime').val();
	var cp_number = $('#cp_number').val();
	var cp_desc = $('#cp_desc').val();
	var cp_img = $('#img_buzou_0_0').val();

	var zhuliao_num = $("#txtTRLastIndex_zhuliao").val();
	var fuliao_num = $("#txtTRLastIndex_fuliao").val();
	var buzou_num = $("#txtTRLastIndex_buzou").val();
	var zhuliaos = "";
	for(var i=1;i<zhuliao_num;i++){
		var zl_name = $("#txtName_zhuliao"+i).val().trim();
		var flg_name = $("#txtfengliang_zhuliao"+i).val().trim();
		if(zl_name==""){
			alert("主料名不能为空!");
			return
		}
		if(flg_name==""){
			alert("主料份量不能为空!");
			return
		}
		zhuliaos = zhuliaos + zl_name + "#" + flg_name + "@";
	}

	var fuliaos = "";
	for(var i=1;i<fuliao_num;i++){
		var fl_name = $("#txtName_fuliao"+i).val().trim();
		var flg_name = $("#txtfengliang_fuliao"+i).val().trim();
		if(fl_name==""){
			alert("辅料名不能为空!");
			return
		}
		if(flg_name==""){
			alert("辅料份量不能为空!");
			return
		}
		fuliaos = fuliaos + fl_name + "#" + flg_name + "@";
	}
	
	var buzous = "";
	for(var i=1;i<buzou_num;i++){
		var buzou_img_num = $("#txtTRLastIndex_bz_"+i).val();
		var bz_msg = $("#txtMsg_buzou"+i).val().trim();
		if(bz_msg==""){
			alert("步奏内容不能为空!");
			return
		}
		var bz_imgs = "";
		for(var j=1;j<buzou_img_num;j++){
			var bz_img = $("#img_buzou_"+i+"_"+j).val().trim();
			bz_imgs = bz_imgs + bz_img + "#";
		}
		buzous = buzous + bz_msg + "#" + bz_imgs + "@";
	}	
	
	if(cp_name==""){
		alert("请输入菜谱名!");
		return
	}
	if(cp_time==""){
		alert("请输入时长!");
		return
	}
	if(cp_ptime==""){
		alert("请输入准备时长!");
		return
	}
	if(cp_number==""){
		alert("请输入人数!");
		return
	}
	var fun = function(data) {
		if(data.s==1){
			alert("添加成功,您可以继续添加!");			
		}else{
			alert("添加失败："+data.error_info);
		}
	};
	exeAjax(ajaxUrl("${aier_url}${aier_urijs}caipu_addCaiPu${aier_suffix}"), fun, 
		{"cp_name" :cp_name,"cp_time" :cp_time,"cp_ptime" :cp_ptime,"cp_number" :cp_number,"cp_desc":cp_desc,"gy_id":gy_id,"kw_id":kw_id,"nd_id":nd_id,"cx_id":cx_id,"cp_img":cp_img,
		"zhuliaos" :zhuliaos,"fuliaos" : fuliaos,"buzous" :buzous});
		
}

//设置下拉复选框
/*
$("#gongyi_types").multiselect({
   noneSelectedText: "请选择工艺",
   selectedText: "已选中#个工艺",
   selectedList: 3
});
$("#kouwei_types").multiselect({
   noneSelectedText: "请选择口味",
   selectedText: "已选中#个口味",
   selectedList: 3
});
$("#nandu_types").multiselect({
   noneSelectedText: "请选择难度",
   selectedText: "已选中#个难度",
   selectedList: 3
});
*/	

function upfile(bz_rid,bz_cid) {

	try {$.ajaxFileUpload({
			url : "${aier_url}${aier_urijs}caipu_upfile${aier_suffix}?num=${num}&rownum="+bz_rid+"&cellnum="+bz_cid,
			secureuri : false,
			fileElementId : 'file'+bz_rid+'_'+bz_cid, 
			dataType : 'json',
			success : function(data) { 
				$("#img_buzou_"+bz_rid+"_"+bz_cid).val(data.imgName);
				$("#buzou_"+bz_rid+"_"+bz_cid).attr("src","${imgUrl}" + data.imgName);		
			},
			error : function(data, e) {
				$().message("上传失败");
			}
		});
	} catch (e) {
		$().message("服务器连接超时");
	}
}
	 	
function findObj(theObj, theDoc)
{ 
	var p, i, foundObj; 
	if(!theDoc) theDoc = document; 
	if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) {    
		theDoc = parent.frames[theObj.substring(p+1)].document;    theObj = theObj.substring(0,p); 
	} 
	if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; 
	for (i=0; !foundObj && i < theDoc.forms.length; i++)     foundObj = theDoc.forms[i][theObj]; 
	for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)     foundObj = findObj(theObj,theDoc.layers[i].document); 
	if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);    
	return foundObj;
}

//添加一个table行
function AddSignRow(tableId){ //读取最后一行的行号，存放在txtTRLastIndex_zl文本框中 
	var txtTRLastIndex = findObj("txtTRLastIndex_"+tableId,document);
	var rowID = parseInt(txtTRLastIndex.value);
	var signFrame = findObj(tableId,document);
	//添加行
	var newTR = signFrame.insertRow(signFrame.rows.length);
	newTR.id = "SignItem" + tableId + rowID;
	//添加列:序号
	var newNameTD=newTR.insertCell(0);
	//添加列内容
	newNameTD.innerHTML = newTR.rowIndex.toString();
	//添加列:名称
	var newNameTD=newTR.insertCell(1);
	//添加列内容
	newNameTD.innerHTML = "<input id='txtName_" + tableId + rowID + "' type='text' size='20' />";
	//添加列:分量
	var newFengLiangTD=newTR.insertCell(2);
	//添加列内容
	newFengLiangTD.innerHTML = "<input id='txtfengliang_" + tableId + rowID + "' type='text' size='20' />";
	//将行号推进下一行
	txtTRLastIndex.value = (rowID + 1).toString() ;
	}
	
//删除指定行
function DeleteSignRow(tableId){
	var signFrame = findObj(tableId,document);
	var i = $("#txtTRLastIndex_"+tableId).val()-1;
	if(i<1){
		return;
	}
	//删除指定Index的行
	signFrame.deleteRow(i);
	$("#txtTRLastIndex_"+tableId).val(i);
	
}
//添加步奏行
function AddbuzouRow(tableId){
	var txtTRLastIndex = findObj("txtTRLastIndex_"+tableId,document);
	var rowID = parseInt(txtTRLastIndex.value);
	var signFrame = findObj(tableId,document);
	//添加行
	var newTR = signFrame.insertRow(signFrame.rows.length);
	newTR.id = "SignItem" + rowID;
	//添加列:序号
	var newNameTD=newTR.insertCell(0);
	//添加列内容
	newNameTD.innerHTML = newTR.rowIndex.toString();
	//添加列:步奏内容
	var newMsgTD=newTR.insertCell(1);
	//添加列内容
	newMsgTD.innerHTML = "<textarea id='txtMsg_" + tableId + rowID + "' rows='6' cols='40' />";
	//添加列:步奏图片
	var newImgTD=newTR.insertCell(2);
	//添加列内容
/**	newImgTD.innerHTML = "<input id='file"+rowID+"' type='file' name='file"+rowID+"' /><button onclick='upfile("+rowID+");' class='b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' role='button' aria-disabled='false'><span class='ui-button-text'>上传</span></button><br>"
						+ "<input type='hidden' id='img_buzou_"+rowID+"' />"
						+ "<img id='buzou_"+rowID+"' width='200' height='150'>";*/
	newImgTD.innerHTML = "<table id='tb_t_"+rowID+"' ><tr id='tr_t_"+rowID+"'><td><button onclick='addCell("+rowID+")'>添加图片</button><button onclick='DeleteSignCell("+rowID+")'>删除图片</button></td><td>"
						+ "<input id='file"+rowID+"_1' type='file' name='file"+rowID+"_1' /><button onclick='upfile("+rowID+",1);'>上传</button><br>"
						+ "<input type='hidden' id='img_buzou_"+rowID+"_1' />"
						+ "<img id='buzou_"+rowID+"_1' width='200' height='150'><td></td></tr></table><input type='hidden' id='txtTRLastIndex_bz_"+rowID+"' value=2 />";
	
	//将行号推进下一行
	txtTRLastIndex.value = (rowID + 1).toString() ;
}
function addCell(rowID){
	var TR = findObj("tr_t_"+rowID,document);
	var i = $("#txtTRLastIndex_bz_"+rowID).val()-0;
	var newTD=TR.insertCell(i);
	newTD.id = "SignTD" + i;
	//添加列内容
	newTD.innerHTML = "<input type='text' value='sss'>";
	newTD.innerHTML = "<input id='file"+rowID+"_"+i+"' type='file' name='file"+rowID+"_"+i+"' /><button onclick='upfile("+rowID+","+i+");' class='b_maSel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' role='button' aria-disabled='false'><span class='ui-button-text'>上传</span></button><br>"
						+ "<input type='hidden' id='img_buzou_"+rowID+"_"+i+"' />"
						+ "<img id='buzou_"+rowID+"_"+i+"' width='200' height='150'>";
	$("#txtTRLastIndex_bz_"+rowID).val(i+1);
}
function DeleteSignCell(rowID){
	var TR = findObj("tr_t_"+rowID,document);
	var i = $("#txtTRLastIndex_bz_"+rowID).val()-1;
	if(i==1){
		return;
	}
	TR.deleteCell(i);
	$("#txtTRLastIndex_bz_"+rowID).val(i);
}
</script>
</html>